<template>
  <div>
    <ay-aside :page-info="pageInfo" />
    <div class="app-container">
      <div class="filter-container">
        <el-row>
          <el-col :span="4">
            <el-input v-model="search.memberId" placeholder="会员ID" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
            </el-input>
          </el-col>
        </el-row>
      </div>
      <div ref="chart" class="infinite-list-wrapper" />
    </div>
  </div>
</template>

<script>
import { getSubordinateList } from '@/api/data-core'
import AyAside from '@/components/Aside'
import echarts from 'echarts'
export default {
  name: 'DataCoreSuperiorSearch',
  components: { AyAside },
  filters: {},
  data() {
    return {
      filterNameKey: '1',
      search: {
        isVal: false,
        memberId: null // 会员id
      },
      myChart: null,
      count: 10,
      loading: true,
      noMore: false,
      listData: [],
      listLoading: false
    }
  },
  created() {
    this.pageInfo = this.$route.meta
  },
  mounted() {
    this.initECharts()
  },
  methods: {
    initECharts() {
      this.myChart = echarts.init(this.$refs.chart)
      this.drawECharts()
    },
    drawECharts() {
      this.myChart.showLoading()
      getSubordinateList().then(rawData => {
        this.myChart.hideLoading()
        function convert(source, target, basePath) {
          for (var key in source) {
            var path = basePath ? (basePath + '.' + key) : key
            if (!key.match(/^\$/)) {
              target.children = target.children || []
              var child = {
                name: path
              }
              target.children.push(child)
              convert(source[key], child, path)
            }
          }
          if (!target.children) {
            target.value = source.$count || 1
          } else {
            target.children.push({
              name: basePath,
              value: source.$count
            })
          }
        }
        var data = []
        convert(rawData, data, '')
        this.myChart.setOption({
          title: {
            text: 'ECharts 配置项查询分布',
            subtext: '2016/04',
            left: 'leafDepth'
          },
          tooltip: {},
          series: [{
            name: 'option',
            type: 'treemap',
            visibleMin: 300,
            data: data.children,
            leafDepth: 1,
            levels: [
              {
                itemStyle: {
                  borderColor: '#555',
                  borderWidth: 4,
                  gapWidth: 4
                }
              },
              {
                colorSaturation: [0.3, 0.6],
                itemStyle: {
                  borderColorSaturation: 0.7,
                  gapWidth: 2,
                  borderWidth: 2
                }
              },
              {
                colorSaturation: [0.3, 0.5],
                itemStyle: {
                  borderColorSaturation: 0.6,
                  gapWidth: 1
                }
              },
              {
                colorSaturation: [0.3, 0.5]
              }
            ]
          }]
        })
      })
    },
    // 查询
    handleSearch() {
      this.search.isVal = true
      this.listData = []
      this.getList()
    },
    // 获取表格数据接口
    getList() {
      this.loading = true
    }
  }
}
</script>

<style lang="scss">
.app-container {
  .filter-container{
  }
  .infinite-list-wrapper {
    min-width: 1000px;
    height:800px;
  }
}
</style>
